<script setup>
import { ref } from 'vue'
import { designApi } from '@/api/design'
import CommonButton from '@/components/CommonButton.vue'

const formData = ref({
  area: '',
  type: '',
  layout: '',
  style: '',
  requirements: ''
})

const loading = ref(false)

const houseTypes = [
  { label: '住宅', value: 'residential' },
  { label: '办公', value: 'office' },
  { label: '商铺', value: 'shop' }
]

const layoutTypes = [
  { label: '一室一厅', value: '1b1l' },
  { label: '两室一厅', value: '2b1l' },
  { label: '三室两厅', value: '3b2l' },
  { label: '四室两厅', value: '4b2l' }
]

const styleTypes = [
  { label: '现代简约', value: 'modern' },
  { label: '北欧风格', value: 'nordic' },
  { label: '日式禅风', value: 'japanese' },
  { label: '美式轻奢', value: 'american' },
  { label: '中式古典', value: 'chinese' }
]

const handleSubmit = async () => {
  if (!formData.value.area || !formData.value.type || !formData.value.layout || !formData.value.style) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  
  loading.value = true
  try {
    const res = await designApi.generateDesign({
      houseInfo: {
        area: Number(formData.value.area),
        type: formData.value.type,
        layout: formData.value.layout,
        style: formData.value.style
      },
      requirements: formData.value.requirements
    })
    
    uni.navigateTo({
      url: `/pages/design/ai-generate?id=${res.data.id}`
    })
  } catch (error) {
    uni.showToast({
      title: error.message || '生成失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <text class="label">房屋面积（平方米）</text>
        <input 
          type="number"
          v-model="formData.area"
          placeholder="请输入房屋面积"
          class="input"
        />
      </view>
      
      <view class="form-item">
        <text class="label">房屋类型</text>
        <view class="radio-group">
          <view 
            v-for="item in houseTypes"
            :key="item.value"
            class="radio-item"
            :class="{ active: formData.type === item.value }"
            @click="formData.type = item.value"
          >
            {{ item.label }}
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">户型布局</text>
        <view class="radio-group">
          <view 
            v-for="item in layoutTypes"
            :key="item.value"
            class="radio-item"
            :class="{ active: formData.layout === item.value }"
            @click="formData.layout = item.value"
          >
            {{ item.label }}
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">装修风格</text>
        <view class="radio-group">
          <view 
            v-for="item in styleTypes"
            :key="item.value"
            class="radio-item"
            :class="{ active: formData.style === item.value }"
            @click="formData.style = item.value"
          >
            {{ item.label }}
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">特殊需求（选填）</text>
        <textarea
          v-model="formData.requirements"
          placeholder="请输入您的特殊需求，如：需要书房、婴儿房等"
          class="textarea"
        />
      </view>
    </view>
    
    <view class="footer">
      <CommonButton 
        type="primary"
        size="large"
        :loading="loading"
        @click="handleSubmit"
      >
        开始生成
      </CommonButton>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 32rpx;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
}

.form {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
}

.form-item {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 16rpx;
}

.input {
  width: 100%;
  height: 88rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
}

.textarea {
  width: 100%;
  height: 200rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 24rpx;
  font-size: 28rpx;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  margin: -8rpx;
}

.radio-item {
  margin: 8rpx;
  padding: 16rpx 32rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #666666;
  
  &.active {
    background-color: #e8f7e4;
    color: #3cc51f;
  }
  
  &:active {
    opacity: 0.8;
  }
}

.footer {
  position: fixed;
  left: 32rpx;
  right: 32rpx;
  bottom: env(safe-area-inset-bottom);
  padding: 32rpx 0;
  background-color: #ffffff;
}
</style>
 